<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代谢路径图</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        body {
            display: flex;
            flex-direction: column;
            height: 100vh;
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #1e1e1e;
        }

        #graph {
            width: 100%;
            height: 85%;
            background-color: #1e1e1e;
            border-radius: 8px;
            padding: 20px;
            box-sizing: border-box;
        }

        .node circle {
            stroke: #3d3d3d;
            stroke-width: 2px;
        }

        .node.primary circle {
            fill: #2d2d2d;
        }

        .node.secondary circle {
            fill: #252525;
        }

        .node text {
            fill: #d4d4d4;
            text-anchor: middle;
            font-size: 14px;
        }

        .link {
            stroke: #4a4a4a;
            stroke-width: 2px;
        }

        .arrow {
            fill: #4a4a4a;
        }

        #info-panel {
            position: fixed;
            right: 0;
            top: 0;
            width: 0;
            height: 100vh;
            background-color: #2d2d2d;
            overflow-y: auto;
            transition: width 0.3s ease;
            padding: 0;
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
            z-index: 1000; /* 确保信息面板在最上层 */
        }

        #info-panel.active {
            width: 40%;
            padding: 20px;
        }

        #info-panel-content {
            color: #d4d4d4;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            opacity: 0;
            transition: opacity 0.3s ease;
            padding-bottom: 40px; /* 增加底部内边距 */
            margin-bottom: 20px; /* 增加底部外边距 */
        }

        #info-panel.active #info-panel-content {
            opacity: 1;
        }

        #info-panel h1 {
            color: #fff;
            border-bottom: 2px solid #4a4a4a;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        #info-panel h3 {
            color: #2196F3;
            margin-top: 25px;
        }

        #info-panel h4 {
            color: #4CAF50;
            margin-top: 20px;
        }

        #info-panel ul, #info-panel ol {
            padding-left: 20px;
        }

        #info-panel li {
            margin-bottom: 8px;
        }

        #close-panel {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            padding: 5px;
        }

        #close-panel:hover {
            color: #2196F3;
        }

        #control-panel {
            width: 100%;
            height: 15%;
            background-color: #2d2d2d;
            display: flex;
            justify-content: flex-start;  /* 改为 flex-start */
            align-items: center;
            padding: 10px;
            padding-left: 50px;  /* 添加左边距 */
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
        }

        #control-panel button {
            border: none;
            color: white;
            padding: 10px 20px;
            margin: 0 10px;
            text-align: center;
            text-decoration: none;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #control-EMP {
            background-color: #4CAF50; /* EMP 绿色 */
        }

        #control-TCA {
            background-color: #FF5722; /* TCA 橙色 */
        }

        #control-PPP {
            background-color: #2196F3; /* PPP 蓝色 */
        }

        #control-GS {
            background-color: #9C27B0; /* GS 紫色 */
        }

        #control-GNG {
            background-color: #FFC107; /* GNG 黄色 */
        }

        #control-GC {
            background-color: #E91E63; /* GC 粉红色 */
        }

        #control-Other {
            background-color: #424242; /* Other 深灰色 */
        }

        #control-panel button:hover {
            opacity: 0.8; /* 鼠标悬停时透明度变化 */
        }

        /* 新增 Other 章节标题样式 */
        #info-panel h1 {
            color: #d11a2d; /*  */
        }
        #info-panel h2, #info-panel h3, #info-panel h4 {
            color: #ef475d; /*  */
        }
        #info-panel h3 {
            color: #f1939c; /*  */
        }
        #info-panel h4 {
            color: #63bbd0; /*  */
        }

        /* 修改滚动条样式，使其更美观 */
        #info-panel::-webkit-scrollbar {
            width: 8px;
        }

        #info-panel::-webkit-scrollbar-track {
            background: #2d2d2d;
        }

        #info-panel::-webkit-scrollbar-thumb {
            background: #4a4a4a;
            border-radius: 4px;
        }

        #info-panel::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* 在已有的 style 标签中添加 */
        #left-control-panel {
            position: fixed;
            top: 20px;
            left: 20px;
            background-color: #2d2d2d;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            z-index: 1000;
        }

        .control-item {
            margin-bottom: 15px;
        }

        .control-label {
            color: #d4d4d4;
            margin-left: 10px;
            font-size: 14px;
        }

        /* 开关样式 */
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #4a4a4a;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

        .slider.round {
            border-radius: 24px;
        }

        .slider.round:before {
            border-radius: 50%;
        }

        /* 滑块样式 */
        input[type="range"] {
            width: 150px;
            height: 8px;
            background: #4a4a4a;
            border-radius: 4px;
            outline: none;
            -webkit-appearance: none;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 16px;
            height: 16px;
            background: #2196F3;
            border-radius: 50%;
            cursor: pointer;
        }

        /* 添加左侧控制面板的收起/展开状态样式 */
        #left-control-panel {
            transition: transform 0.3s ease;
        }

        #left-control-panel.collapsed {
            transform: translateX(-100%);
        }

        /* 添加/收起按钮样式 */
        #toggle-control-panel {
            position: absolute;
            right: -30px;
            top: 50%;
            transform: translateY(-50%);
            background: #2d2d2d;
            border: none;
            color: #d4d4d4;
            padding: 8px;
            cursor: pointer;
            border-radius: 0 4px 4px 0;
            font-size: 16px;
        }

        #toggle-control-panel:hover {
            background: #3d3d3d;
        }
    </style>

</head>
<body>
    <div id="graph"></div>
    <div id="control-panel">
        <button id="control-EMP">EMP</button>
        <button id="control-TCA">TCA</button>
        <button id="control-PPP">PPP</button>
        <button id="control-GS">GS</button>
        <button id="control-GNG">GNG</button>
        <button id="control-GC">GC</button>  <!-- 新增 GC 按钮 -->
        <button id="control-Other">Other</button>
    </div>
    <div id="info-panel">
        <button id="close-panel">&times;</button>
        <div id="info-panel-content"></div>
    </div>
    <div id="left-control-panel">
        <button id="toggle-control-panel">◀</button>
        <div class="control-item">
            <label class="switch">
                <input type="checkbox" id="highlight-single-arrow">
                <span class="slider round"></span>
            </label>
            <span class="control-label">单向箭头高亮</span>
        </div>
        <div class="control-item">
            <label class="switch">
                <input type="checkbox" id="auto-show-info" checked>
                <span class="slider round"></span>
            </label>
            <span class="control-label">自动显示信息</span>
        </div>
        <div class="control-item">
            <label class="switch">
                <input type="checkbox" id="highlight-energy">
                <span class="slider round"></span>
            </label>
            <span class="control-label">高能分子高亮</span>
        </div>
        <div class="control-item">
            <label class="control-label">聚拢程度</label>
            <input type="range" id="charge-strength" min="0" max="2000" value="1000" step="100">
        </div>
        <div class="control-item">
            <label class="control-label">连线长度</label>
            <input type="range" id="link-distance" min="50" max="400" value="200" step="10">
        </div>
    </div>
    <script>
        const data = {
            nodes: [
                // 主要通路节点
                { id: "EMP", label: "EMP", group: "EMP" },
                { id: "PPP", label: "PPP", group: "PPP" },
                { id: "TCA", label: "TCA", group: "TCA" },
                { id: "GS", label: "GS", group: "GS" },
                { id: "GNG", label: "GNG", group: "GNG" },
                { id: "GC", label: "GC", group: "GC" },
                { id: "DOG", label: "🥵", group: "DOG" },


                // EMP 途径节点
                { id: "Glucose", label: "葡萄糖", group: "EMP" },
                { id: "Glucose-6-Phosphate", label: "葡萄糖-6-磷酸", group: "EMP" },
                { id: "Fructose-6-Phosphate", label: "果糖-6-磷酸", group: "EMP" },
                { id: "Fructose-1,6-bisphosphate", label: "果糖-1,6-二磷酸", group: "EMP" },
                { id: "Glyceraldehyde-3-Phosphate", label: "甘油醛-3-磷酸", group: "EMP" },
                { id: "Dihydroxyacetone Phosphate", label: "二羟基丙酮磷酸", group: "EMP" },
                { id: "1,3-Bisphosphoglycerate", label: "1,3-二磷酸甘油酸", group: "EMP" },
                { id: "3-Phosphoglycerate", label: "3-磷酸甘油酸", group: "EMP" },
                { id: "2-Phosphoglycerate", label: "2-磷酸甘油酸", group: "EMP" },
                { id: "Phosphoenolpyruvate", label: "磷酸烯醇式丙酮酸", group: "EMP" },
                { id: "Pyruvate", label: "丙酮酸", group: "EMP" },

                // TCA 循环节点
                { id: "AcetylCoA", label: "乙酰辅酶A", group: "TCA" },
                { id: "Citrate", label: "柠檬酸", group: "TCA" },
                { id: "Aconitate", label: "顺乌头酸", group: "TCA" },
                { id: "Isocitrate", label: "异柠檬酸", group: "TCA" },
                { id: "αKG", label: "α-酮戊二酸", group: "TCA" },
                { id: "SuccinylCoA", label: "琥珀酰辅酶A", group: "TCA" },
                { id: "Succinate", label: "琥珀酸", group: "TCA" },
                { id: "Fumarate", label: "延胡索酸", group: "TCA" },
                { id: "Malate", label: "苹果酸", group: "TCA" },
                { id: "OAA", label: "草酰乙酸", group: "TCA" },

                // PPP 途径节点
                { id: "6-Phosphoglucono-δ-lactone", label: "6-磷酸葡糖酸内酯", group: "PPP" },
                { id: "6-Phosphogluconate", label: "6-磷酸葡糖酸", group: "PPP" },
                { id: "Ribulose-5-Phosphate", label: "核糖-5-磷酸", group: "PPP" },
                { id: "Ribose-5-Phosphate", label: "核糖-5-磷酸", group: "PPP" },
                { id: "Erythrose-4-Phosphate", label: "赤藓糖-4-酸", group: "PPP" },
                { id: "Sedoheptulose-7-Phosphate", label: "景天庚酮糖-7-磷酸", group: "PPP" },

                // GNG 途径节点
                { id: "Oxaloacetate", label: "草酰乙酸", group: "GNG" },
                { id: "PEP", label: "磷酸烯醇式丙酮酸", group: "GNG" },
                { id: "2PG", label: "2-磷酸甘油酸", group: "GNG" },
                { id: "3PG", label: "3-磷酸甘油酸", group: "GNG" },
                { id: "1,3BPG", label: "1,3-二磷酸甘油酸", group: "GNG" },
                { id: "GAP", label: "甘油醛-3-磷酸", group: "GNG" },
                { id: "DHAP", label: "二羟丙酮磷酸", group: "GNG" },
                { id: "F1,6BP", label: "果糖-1,6-二磷酸", group: "GNG" },
                { id: "F6P", label: "果糖-6-磷酸", group: "GNG" },
                { id: "G6P", label: "葡萄糖-6-磷酸", group: "GNG" },

                // 将 Glycogenesis 途径节点迁移到 GS
                { id: "Glucose1P", label: "葡萄糖-1-磷酸", group: "GS" },
                { id: "UDPGlucose", label: "UDP-葡萄糖", group: "GS" },
                { id: "LinearGlycogen", label: "线性糖原", group: "GS" },
                { id: "BranchedGlycogen", label: "分支糖原", group: "GS" },
                { id: "Glycogen", label: "糖原", group: "GS" },

                // GC
                { id: "Glyoxylate", label: "乙醛酸", group: "GC" },
                { id: "PEP_GC", label: "磷酸烯醇式丙酮酸", group: "GC" },
            ],
            links: [
                { source: "DOG", target: "EMP", double: true },  // 狗链
                { source: "DOG", target: "Glucose", double: true },  // 狗链
                { source: "GC", target: "TCA", double: true },  // 狗链
                { source: "GS", target: "EMP", double: true },
                { source: "EMP", target: "TCA", double: false },
                { source: "PPP", target: "EMP", double: true },
                { source: "EMP", target: "GNG", double: true },
                { source: "GS", target: "GS", double: false },
                { source: "AcetylCoA", target: "OAA", double: false },
                { source: "OAA", target: "Citrate", double: false },
                { source: "Citrate", target: "Aconitate", double: true },
                { source: "Aconitate", target: "Isocitrate", double: true },
                { source: "Isocitrate", target: "αKG", double: false },
                { source: "αKG", target: "SuccinylCoA", double: false },
                { source: "SuccinylCoA", target: "Succinate", double: false },
                { source: "Succinate", target: "Fumarate", double: true },
                { source: "Fumarate", target: "Malate", double: true },
                { source: "Malate", target: "OAA", double: true },
                { source: "Glucose", target: "Glucose-6-Phosphate", double: false },
                { source: "Glucose-6-Phosphate", target: "Fructose-6-Phosphate", double: true },
                { source: "Fructose-6-Phosphate", target: "Fructose-1,6-bisphosphate", double: false },
                { source: "Fructose-1,6-bisphosphate", target: "Glyceraldehyde-3-Phosphate", double: true },
                { source: "Fructose-1,6-bisphosphate", target: "Dihydroxyacetone Phosphate", double: true },
                { source: "Dihydroxyacetone Phosphate", target: "Glyceraldehyde-3-Phosphate", double: true },
                { source: "Glyceraldehyde-3-Phosphate", target: "1,3-Bisphosphoglycerate", double: true },
                { source: "1,3-Bisphosphoglycerate", target: "3-Phosphoglycerate", double: true },
                { source: "3-Phosphoglycerate", target: "2-Phosphoglycerate", double: true },
                { source: "2-Phosphoglycerate", target: "Phosphoenolpyruvate", double: true },
                { source: "Phosphoenolpyruvate", target: "Pyruvate", double: false },
                { source: "Glucose-6-Phosphate", target: "6-Phosphoglucono-δ-lactone", double: false },
                { source: "6-Phosphoglucono-δ-lactone", target: "6-Phosphogluconate", double: false },
                { source: "6-Phosphogluconate", target: "Ribulose-5-Phosphate", double: false },
                { source: "Ribulose-5-Phosphate", target: "Ribose-5-Phosphate", double: true },
                { source: "Ribulose-5-Phosphate", target: "Erythrose-4-Phosphate", double: true },
                { source: "Ribose-5-Phosphate", target: "Fructose-6-Phosphate", double: true },
                { source: "Erythrose-4-Phosphate", target: "Fructose-6-Phosphate", double: true },
                { source: "Erythrose-4-Phosphate", target: "Sedoheptulose-7-Phosphate", double: true },
                { source: "Sedoheptulose-7-Phosphate", target: "Fructose-6-Phosphate", double: true },
                { source: "Pyruvate", target: "AcetylCoA", double: false },
                { source: "Pyruvate", target: "Oxaloacetate", double: false },
                { source: "Oxaloacetate", target: "PEP", double: false },
                { source: "PEP", target: "2PG", double: false },
                { source: "2PG", target: "3PG", double: true },
                { source: "3PG", target: "1,3BPG", double: false },
                { source: "1,3BPG", target: "GAP", double: false },
                { source: "GAP", target: "DHAP", double: true },
                { source: "GAP", target: "F1,6BP", double: false },
                { source: "F1,6BP", target: "F6P", double: false },
                { source: "F6P", target: "G6P", double: true },
                { source: "G6P", target: "Glucose", double: false },
                { source: "Glucose-6-Phosphate", target: "Glucose1P", double: false },
                { source: "Glucose1P", target: "UDPGlucose", double: false },
                { source: "UDPGlucose", target: "LinearGlycogen", double: false },
                { source: "LinearGlycogen", target: "BranchedGlycogen", double: false },
                { source: "BranchedGlycogen", target: "Glycogen", double: false },
                // GC
                { source: "BranchedGlycogen", target: "Glycogen", double: false },

                // 在 data.links 数组中添加以下连接
                { source: "OAA", target: "PEP_GC", double: false },
                { source: "Isocitrate", target: "Glyoxylate", double: false },
                { source: "Glyoxylate", target: "Malate", double: false },
                // { source: "Isocitrate_GC", target: "Glyoxylate", double: false },
                // { source: "Glyoxylate", target: "Malate_GC", double: false },
                // { source: "AcetylCoA_GC", target: "Malate_GC", double: false },
                // { source: "Malate_GC", target: "OAA_GC", double: false },
                // { source: "OAA_GC", target: "PEP_GC", double: false }
            ]
        };

        const width = document.getElementById('graph').clientWidth;
        const height = document.getElementById('graph').clientHeight;

        const svg = d3.select("#graph")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

        const g = svg.append("g");

        // 添加缩放功能
        const zoom = d3.zoom()
            .scaleExtent([0.1, 4])
            .on("zoom", (event) => {
                g.attr("transform", event.transform);
            });

        svg.call(zoom);

        // 添加颜色比例尺
        const color = d3.scaleOrdinal()
            .domain(["EMP", "TCA", "PPP", "GS", "GNG", "DOG", "GC"])  // 添加 GC
            .range(["#4CAF50", "#FF5722", "#2196F3", "#9C27B0", "#FFC107", "#1f2623", "#E91E63"]);  // 添加 GC 的颜色

        // 定义箭头
        const defs = g.append("defs");
        
        // 定义普通箭头标记
        defs.append("marker")
            .attr("id", "arrow")
            .attr("viewBox", "0 -5 10 10")
            .attr("refX", 10)
            .attr("refY", 0)
            .attr("markerWidth", 6)
            .attr("markerHeight", 6)
            .attr("orient", "auto")
            .append("path")
            .attr("d", "M0,-5L10,0L0,5")
            .attr("class", "arrow");

        // 定义高亮箭头标记
        defs.append("marker")
            .attr("id", "arrow-highlighted")
            .attr("viewBox", "0 -5 10 10")
            .attr("refX", 10)
            .attr("refY", 0)
            .attr("markerWidth", 6)
            .attr("markerHeight", 6)
            .attr("orient", "auto")
            .append("path")
            .attr("d", "M0,-5L10,0L0,5")
            .style("fill", "#2196F3"); // 高亮箭头颜色

        // 创建连接线
        const link = g.append("g")
            .selectAll("line")
            .data(data.links)
            .join("line")
            .attr("class", "link")
            .attr("marker-end", "url(#arrow)")
            .style("stroke", "#4a4a4a")
            .style("stroke-width", "2px");

        // 为双向连接添加反向线段
        const doubleLink = g.append("g")
            .selectAll("line")
            .data(data.links.filter(d => d.double))
            .join("line")
            .attr("class", "link")
            .attr("marker-end", "url(#arrow)")
            .style("stroke", "#4a4a4a")
            .style("stroke-width", "2px");

        // 添加关键酶和产物信息
        const linkLabels = g.append("g")
            .selectAll("text")
            .data(data.links)
            .join("text")
            .attr("class", "link-label")
            .attr("text-anchor", "middle")
            .attr("dy", -5)
            .style("fill", "#FFFFFF")
            .text(d => {
                if (d.source === "Glucose" && d.target === "Glucose-6-Phosphate") {
                    return "[己糖激酶, ATP -> ADP]";
                } else if (d.source === "OAA" && d.target === "Citrate") {
                    return "[柠檬酸合酶, +H₂O]";
                } else if (d.source === "Citrate" && d.target === "Aconitate") {
                    return "[顺乌头酸酶, -H₂O]";
                } else if (d.source === "Aconitate" && d.target === "Isocitrate") {
                    return "[顺乌头酸酶, +H₂O]";
                } else if (d.source === "Isocitrate" && d.target === "αKG") {
                    return "[异柠檬酸脱氢酶, CO₂, NAD⁺ -> NADH]";
                } else if (d.source === "αKG" && d.target === "SuccinylCoA") {
                    return "[α-酮戊二酸脱氢酶复合体, CO₂, NAD⁺ -> NADH]";
                } else if (d.source === "SuccinylCoA" && d.target === "Succinate") {
                    return "[琥珀酰辅酶A合成酶, GDP -> GTP]";
                } else if (d.source === "Succinate" && d.target === "Fumarate") {
                    return "[琥珀酸脱氢酶, FAD -> FADH₂]";
                } else if (d.source === "Fumarate" && d.target === "Malate") {
                    return "[延胡索酸酶, +H₂O]";
                } else if (d.source === "Malate" && d.target === "OAA") {
                    return "[苹果酸脱氢酶, NAD⁺ -> NADH]";
                }
                return "";
            });

        // 添加关键酶和产物信息
        const empLinkLabels = g.append("g")
            .selectAll("text")
            .data(data.links)
            .join("text")
            .attr("class", "link-label")
            .attr("text-anchor", "middle")
            .attr("dy", -5)
            .style("fill", "#FFFFFF")
            .text(d => {
                if (d.source === "Glucose-6-Phosphate" && d.target === "Fructose-6-Phosphate") {
                    return "[磷酸己糖异构酶]";
                } else if (d.source === "Fructose-6-Phosphate" && d.target === "Fructose-1,6-bisphosphate") {
                    return "[磷酸果糖激酶-1, ATP -> ADP]";
                } else if (d.source === "Fructose-1,6-bisphosphate" && d.target === "Glyceraldehyde-3-Phosphate") {
                    return "[醛缩酶]";
                } else if (d.source === "Dihydroxyacetone Phosphate" && d.target === "Glyceraldehyde-3-Phosphate") {
                    return "[磷酸三糖异构酶]";
                } else if (d.source === "Glyceraldehyde-3-Phosphate" && d.target === "1,3-Bisphosphoglycerate") {
                    return "[甘油醛-3-磷酸脱氢酶, NAD⁺ -> NADH]";
                } else if (d.source === "1,3-Bisphosphoglycerate" && d.target === "3-Phosphoglycerate") {
                    return "[磷酸甘油酸激酶, ADP -> ATP]";
                } else if (d.source === "3-Phosphoglycerate" && d.target === "2-Phosphoglycerate") {
                    return "[磷酸甘油酸变位酶]";
                } else if (d.source === "2-Phosphoglycerate" && d.target === "Phosphoenolpyruvate") {
                    return "[烯醇化酶]";
                } else if (d.source === "Phosphoenolpyruvate" && d.target === "Pyruvate") {
                    return "[丙酮酸激酶, ADP -> ATP]";
                } else if (d.source === "Pyruvate" && d.target === "AcetylCoA") {
                    return "[丙酮酸脱氢酶复合体, NAD⁺ -> NADH, CoA-SH -> CO₂]";
                }
                return "";
            });

        // 添加关键酶和产物信息
        const pppLinkLabels = g.append("g")
            .selectAll("text")
            .data(data.links)
            .join("text")
            .attr("class", "link-label")
            .attr("text-anchor", "middle")
            .attr("dy", -5)
            .style("fill", "#FFFFFF")
            .text(d => {
                if (d.source === "Glucose-6-Phosphate" && d.target === "6-Phosphoglucono-δ-lactone") {
                    return "[葡萄糖-6-磷酸脱氢酶, NADP⁺ -> NADPH]";
                } else if (d.source === "6-Phosphoglucono-δ-lactone" && d.target === "6-Phosphogluconate") {
                    return "[6-磷酸葡糖酸内酯酶]";
                } else if (d.source === "6-Phosphogluconate" && d.target === "Ribulose-5-Phosphate") {
                    return "[6-磷酸葡糖酸脱氢酶, NADP⁺ -> NADPH+CO₂]";
                } else if (d.source === "Ribulose-5-Phosphate" && d.target === "Ribose-5-Phosphate") {
                    return "[磷酸戊糖异构酶]";
                } else if (d.source === "Ribulose-5-Phosphate" && d.target === "Erythrose-4-Phosphate") {
                    return "[转酮酶]";
                } else if (d.source === "Ribose-5-Phosphate" && d.target === "Fructose-6-Phosphate") {
                    return "[转醛醇酶]";
                } else if (d.source === "Erythrose-4-Phosphate" && d.target === "Fructose-6-Phosphate") {
                    return "[转醛醇酶]";
                } else if (d.source === "Erythrose-4-Phosphate" && d.target === "Sedoheptulose-7-Phosphate") {
                    return "[转酮醇酶]";
                } else if (d.source === "Sedoheptulose-7-Phosphate" && d.target === "Fructose-6-Phosphate") {
                    return "[转醛醇酶]";
                }
                return "";
            });

        // 添加关键酶和产物信息
        const glycogenesisLinkLabels = g.append("g")
            .selectAll("text")
            .data(data.links)
            .join("text")
            .attr("class", "link-label")
            .attr("text-anchor", "middle")
            .attr("dy", -5)
            .style("fill", "#FFFFFF")
            .text(d => {
                if (d.source === "Glucose" && d.target === "Glucose-6-Phosphate") {
                    return "[己糖激酶, ATP -> ADP]";
                } else if (d.source === "Glucose-6-Phosphate" && d.target === "Glucose1P") {
                    return "[磷酸葡萄糖变位酶]";
                } else if (d.source === "Glucose1P" && d.target === "UDPGlucose") {
                    return "[UDP-葡萄糖焦磷酸化酶, UTP -> PPi]";
                } else if (d.source === "UDPGlucose" && d.target === "LinearGlycogen") {
                    return "[糖原合成酶, UDP]";
                } else if (d.source === "LinearGlycogen" && d.target === "BranchedGlycogen") {
                    return "[糖原分支酶]";
                }
                return "";
            });
                   // 添加关键酶和产物信息
   // 添加关键酶和产物信息
        const gcLinkLabels = g.append("g")
            .selectAll("text")
            .data(data.links)
            .join("text")
            .attr("class", "link-label")
            .attr("text-anchor", "middle")
            .attr("dy", -5)
            .style("fill", "#FFFFFF")
            .text(d => {
                if (d.source === "Isocitrate" && d.target === "Glyoxylate") {
                    return "[异柠檬酸裂解酶, 琥珀酸]";
                } else if (d.source === "Glyoxylate" && d.target === "Malate") {
                    return "[苹果酸合酶, H₂O]";
                } else if (d.source === "OAA" && d.target === "PEP_GC") {
                    return "[磷酸烯醇式丙酮酸羧激酶]";
                }
                return "";
            });

        // 创建节点
        const node = g.append("g")
            .selectAll(".node")
            .data(data.nodes)
            .join("g")
            .attr("class", d => `node ${d.type}`)
            .call(d3.drag()
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragended)
            );

        node.append("circle")
            .attr("r", 30)
            .style("fill", d => color(d.group))
            .style("stroke", "#3d3d3d")
            .style("stroke-width", "2px");

        node.append("text")
            .text(d => d.label)
            .attr("dy", ".35em")
            .style("fill", "#FFFFFF");

        // 定义主要通路节点
        const mainPathways = ["EMP", "TCA", "PPP", "GS", "GNG", "GC"];

        // 为节点添加点击事件
        node.on("click", (event, d) => {
            if (mainPathways.includes(d.id)) {
                handlePathwayClick(d.id);
            } else {
                // 点击其他节点时恢复所有元素显示
                resetPathwayDisplay();
            }
        });

        // 添加重置显示函数
        function resetPathwayDisplay() {
            // 清除激活状态
            node.classed("active", false);
            
            // 恢复所有元素的完全显示
            node.style("opacity", 1);
            link.style("opacity", 1);
            doubleLink.style("opacity", 1);
            linkLabels.style("opacity", 1);
            empLinkLabels.style("opacity", 1);
            pppLinkLabels.style("opacity", 1);
            glycogenesisLinkLabels.style("opacity", 1);
            gngLinkLabels.style("opacity", 1);
            gcLinkLabels.style("opacity", 1);
            node.classed("active", false);
        }

        // 力向图
        const simulation = d3.forceSimulation(data.nodes)
            .force("link", d3.forceLink(data.links)
                .id(d => d.id)
                .distance(200))
            .force("charge", d3.forceManyBody().strength(-1000))
            .force("center", d3.forceCenter(width / 2, height / 2))
            .force("collision", d3.forceCollide().radius(50));

        // 更新位置
        simulation.on("tick", () => {
            link.attr("x1", d => {
                const dx = d.target.x - d.source.x;
                const dy = d.target.y - d.source.y;
                const dr = Math.sqrt(dx * dx + dy * dy);
                return d.source.x + (dx * 25) / dr;
            })
            .attr("y1", d => {
                const dx = d.target.x - d.source.x;
                const dy = d.target.y - d.source.y;
                const dr = Math.sqrt(dx * dx + dy * dy);
                return d.source.y + (dy * 25) / dr;
            })
            .attr("x2", d => {
                const dx = d.target.x - d.source.x;
                const dy = d.target.y - d.source.y;
                const dr = Math.sqrt(dx * dx + dy * dy);
                return d.target.x - (dx * 27) / dr;
            })
            .attr("y2", d => {
                const dx = d.target.x - d.source.x;
                const dy = d.target.y - d.source.y;
                const dr = Math.sqrt(dx * dx + dy * dy);
                return d.target.y - (dy * 27) / dr;
            });

            // 更新双向连的反向线段
            doubleLink.attr("x1", d => {
                const dx = d.source.x - d.target.x;
                const dy = d.source.y - d.target.y;
                const dr = Math.sqrt(dx * dx + dy * dy);
                return d.target.x + (dx * 25) / dr;
            })
            .attr("y1", d => {
                const dx = d.source.x - d.target.x;
                const dy = d.source.y - d.target.y;
                const dr = Math.sqrt(dx * dx + dy * dy);
                return d.target.y + (dy * 25) / dr;
            })
            .attr("x2", d => {
                const dx = d.source.x - d.target.x;
                const dy = d.source.y - d.target.y;
                const dr = Math.sqrt(dx * dx + dy * dy);
                return d.source.x - (dx * 27) / dr;
            })
            .attr("y2", d => {
                const dx = d.source.x - d.target.x;
                const dy = d.source.y - d.target.y;
                const dr = Math.sqrt(dx * dx + dy * dy);
                return d.source.y - (dy * 27) / dr;
            });

            node.attr("transform", d => `translate(${d.x},${d.y})`);

            // 更新 GNG 途径的连接线标签位置
            gngLinkLabels.attr("x", d => (d.source.x + d.target.x) / 2)
                         .attr("y", d => (d.source.y + d.target.y) / 2);

            // 更新关键酶和产物信息的位置
            linkLabels.attr("x", d => (d.source.x + d.target.x) / 2)
                      .attr("y", d => (d.source.y + d.target.y) / 2);

            // 更新EMP途径的连接线标签位置
            empLinkLabels.attr("x", d => (d.source.x + d.target.x) / 2)
                         .attr("y", d => (d.source.y + d.target.y) / 2);

            // 更新PPP途径的连接线标签位置
            pppLinkLabels.attr("x", d => (d.source.x + d.target.x) / 2)
                         .attr("y", d => (d.source.y + d.target.y) / 2);

            // 新糖原生成途径的连接线标签位置
            glycogenesisLinkLabels.attr("x", d => (d.source.x + d.target.x) / 2)
                                 .attr("y", d => (d.source.y + d.target.y) / 2);
            gcLinkLabels.attr("x", d => (d.source.x + d.target.x) / 2)
                                 .attr("y", d => (d.source.y + d.target.y) / 2);
        });


        // 修改拖拽相关函
        function dragstarted(event) {
            if (!event.active) simulation.alphaTarget(0.1).restart();
            event.subject.fx = event.subject.x;
            event.subject.fy = event.subject.y;
        }

        function dragged(event) {
            event.subject.fx = event.x;
            event.subject.fy = event.y;
        }

        function dragended(event) {
            if (!event.active) {
                simulation.alphaTarget(0);
                // 在拖动结束后延迟一小段时间再释放固定位置
                setTimeout(() => {
                    event.subject.fx = null;
                    event.subject.fy = null;
                }, 100); // 100ms 的延迟，可以根据需要调整
            }
        }

        // 响应窗口大小变化
        window.addEventListener('resize', () => {
            const newWidth = document.getElementById('graph').clientWidth;
            const newHeight = document.getElementById('graph').clientHeight;
            
            svg.attr("width", newWidth)
               .attr("height", newHeight);
            
            simulation.force("center", d3.forceCenter(newWidth / 2, newHeight / 2))
                     .restart();
        });

        const pathwayInfo = {
            "EMP": `
                <h1>EMP</h1>
                <h3>糖酵解途径（Embden-Meyerhof-Parnas Pathway，EMP）</h3>
                <h4>定义</h4>
                <p>糖酵解途径（EMP）是将一分子葡萄糖分解为两分子丙酮酸的过程，同时生成ATP和NADH。该过程在细胞质中进行，是葡萄糖有氧和无氧分解的共同起始途径。</p>

                <h4>反应位置</h4>
                <p>糖酵解途径发生在细胞质中。</p>

                <h4>关键酶</h4>
                <p>糖酵解过程中的关键酶包括：</p>
                <ol>
                    <li><strong>己糖激酶（Hexokinase, HK）</strong>：该酶受产物葡萄糖-6-磷酸的反馈抑制，但并非主要限速步骤。</li>
                    <li><strong>磷酸果糖激酶-1（Phosphofructokinase-1, PFK-1）</strong>：这是糖酵解的主要限速酶，PFK-1受到能量状态的强烈调控——ATP和柠檬酸抑制其活性，而ADP、AMP和果糖-2,6-二磷酸促进其活性。</li>
                    <li><strong>丙酮酸激酶（Pyruvate Kinase, PK）</strong>：其活性受ATP抑制，而ADP、AMP等激活物会增强其活性。</li>
                </ol>

                <h4>总能量（ATP）计算过程</h4>
                <p>糖酵解途径中ATP的生成和消耗：</p>
                <ol>
                    <li><strong>消耗</strong>：2 ATP</li>
                    <li><strong>生成</strong>：4 ATP + 2 NADH（约 5 ATP 等效）</li>
                    <li><strong>总计</strong>：7 ATP</li>
                </ol>

                <h4>意义</h4>
                <p>糖酵解途径具有重要的生理意义：</p>
                <ol>
                    <li><strong>快速能量供应</strong>：糖酵解是无氧条件下（如剧烈运动时）快速提供能量的主途径，能够迅速生成ATP以满足细胞的能量需求。</li>
                    <li><strong>有氧代谢前体</strong>：糖酵生成的丙酮酸可以进入线粒，进一步参与有氧呼吸，生成更多的ATP。</li>
                    <li><strong>中间代谢产物</strong>：糖酵解途径的中间产物可以用于其他代谢途径，如磷酸戊糖途径、氨基酸合成等。</li>
                    <li><strong>维持氧化还原平衡</strong>：糖酵解过程中生成的NADH需要通过乳酸发酵或其他途径重新氧化为NAD+，以维持细胞内的氧化还原平衡。</li>
                </ol>
                <p>糖酵解途径在生物体的能量代谢中起着至关重要的作用，是多种代谢途径的汇点和基础。</p>
            `,
            "PPP": `
                <h1>PPP</h1>
                <h3>磷戊糖途径（Pentose Phosphate Pathway，PPP）</h3>

                <h4>定义</h4>
                <p>磷酸戊糖途（PPP），是一种在细质中进行的代谢途径。该途径的主要功能是生成核苷酸合成所需的核糖-5-磷酸和维持细胞内还原型谷胱甘肽的水平。PPP分为两个阶段：氧化阶段和非氧化阶段。氧化阶段生成NADPH，而非氧化阶段则涉及糖磷酸的相互转化以生成核糖-5-磷酸。</p>

                <h4>反应位置</h4>
                <p>磷酸戊糖途径发生在细胞质中。</p>

                <h4>关键酶</h4>
                <p>磷酸戊糖途径中的关键酶包括：</p>
                <ol>
                    <li><strong>葡萄糖-6-磷酸脱氢酶（Glucose-6-phosphate Dehydrogenase, G6PD）</strong>：这是PPP的关键限速酶，其活性受到NADPH的反馈抑制，而NADP⁺的存在能激活其活性，促进该途径以生成还原力。</li>
                </ol>

                <h4>总能量（ATP）计算过程</h4>
                <p>磷酸戊糖途径中的能量生成：</p>
                <ol>
                    <li><strong>消耗</strong>：无直接消耗</li>
                    <li><strong>生成</strong>：2 NADPH（不转化为ATP，用于还原作用）</li>
                    <li><strong>总计</strong>：无ATP直接生成</li>
                </ol>

                <h4>意义</h4>
                <p>磷酸戊糖途径具有重要的生理意义：</p>
                <ol>
                    <li><strong>NADPH提供还原力</strong>：NADPH是脂肪酸合成、胆固醇合成等还原性生物合成过程的重要电子供体，同时通过维持谷胱甘肽的还状态（GSH）护细胞免受氧化损伤。</li>
                    <li><strong>核糖-5-磷酸供应</strong>：核糖-5-磷酸是核苷酸和核酸合成的必需前体，特别是在快速分裂的细胞中（如骨髓细胞和癌细胞）尤为重要。</li>
                    <li><strong>支持其他代谢途径</strong>：PPP的中间产物可以进入糖酵解途径，支持能量代谢生物合成过程。</li>
                </ol>
                <p>磷酸戊糖途径不仅是核苷酸合成和NADPH生成的关键途径，还在维持细胞抗氧化能力和支持多种代谢过程中发挥重要作用。</p>
            `,
            "TCA": `
                <h1>TCA</h1>
                <h3>三羧酸循环（TCA循环，Tricarboxylic Acid Cycle）</h3>

                <h4>定义</h4>
                <p>三羧酸循环（TCA循环），发生在线粒体基质中，TCA循环不仅是能量产生的核心环节，也是多种代谢中间产物的重要来源，通过氧化乙酰辅酶A（Acetyl-CoA）生成高能分子以及二氧碳。</p>

                <h4>反应位置</h4>
                <p>三羧酸循环发生线粒体基质中。</p>

                <h4>关键酶</h4>
                <p>TCA循环中的关键酶包括：</p>
                <ol>
                    <li><strong>柠檬酸合酶（Citrate synthase）</strong>：受ATP和NADH的反馈抑制。</li>
                    <li><strong>异柠檬酸脱氢酶（Isocitrate dehydrogenase）</strong>：这是TCA循环的主要限速酶，被ADP激活，受NADH的反馈抑制。</li>
                    <li><strong>α-酮戊二酸脱氢酶复合体（α-Ketoglutarate dehydrogenase complex）</strong>：其活性受NADH抑制，且受底物（α-酮戊二酸）浓度调控。</li>
                </ol>

                <h4>总能量（ATP）计算过程</h4>
                <p>每分子乙酰辅酶A通过TCA循环的ATP生成：</p>
                <ol>
                    <li><strong>消耗</strong>：
                        <ul>无直接消耗</ul>
                    <li><strong>生成</strong>：
                        <ul>
                            3 NADH（7.5 ATP）+ 1 FADH₂（1.5 ATP）+1 GTP（1 ATP）
                        </ul>
                    </li>
                    <li><strong>总计</strong>：10 ATP</li>
                </ol>

                <h4>意义</h4>
                <p>TCA循在细胞代谢中具有重要的生理意义：</p>
                <ol>
                    <li><strong>三大营养物质氧化分解的共同途径</strong>：碳水化合物经糖酵解生成丙酮酸，脂肪酸β-氧化生成乙酰CoA，氨基酸经脱氨基后的碳骨架，均可通过TCA循环彻底氧化。</li>
                    <li><strong>中间谢产物供应</strong>：α-酮戊二酸和草酰乙酸可通过转基作用合成氨酸和天冬氨酸等非必需氨基酸。</li>
                    <li><strong>为其他物质代谢提供小分子前体</strong>：琥珀酰CoA用于血红素合成，柠檬酸可用于脂肪酸合成。</li>
                    <li><strong>支持呼吸链功能</strong>：TCA循环生成的NADH和FADH2作为电子传递链的电子供体，驱动氧化磷酸化过程，生成ATP。</li>
                </ol>
                <p>TCA循环是细胞代谢的枢纽不仅是能量产生的主要途径，也是多种生物合成反应的重要中间产物来源。</p>
            `,
            "GS": `
                <h1>GS</h1>
                <h3>糖原合成（Glycogen Synthesis，GS）</h3>

                <h4>定义</h4>
                <p>糖原合成是将葡萄糖分子聚合成糖原的过程。糖原是一种多分支多糖，主要储存在肝脏和肌肉中作为能量储备。合成过程需要糖原蛋白作为引物。</p>

                <h4>反应位置</h4>
                <p>糖原合成主要发生在肝脏和肌肉细胞的细胞质中。</p>

                <h4>关键酶</h4>
                <p>糖原合成过程中的关键酶包括：</p>
                <ol>
                    <li><strong>糖原合酶（Glycogen Synthase）</strong>：糖原合酶为糖原合成的限速酶，受到磷酸化的抑制（受胰高血糖素信号调控）和去磷酸化的激活（受胰岛素信号调控），并且在葡萄糖-6-磷酸存在下活性进一步增强。需要注意的是，糖原合酶只能在已有的引物（至少4个葡萄糖残基）上延长糖链。</li>
                </ol>

                <h4>总能量（ATP）计算过程</h4>
                <p>糖原合成过程中ATP的消耗：</p>
                <ol>
                    <li><strong>消耗</strong>：2 ATP/葡萄糖</li>
                    <li><strong>生成</strong>：无</li>
                    <li><strong>总计</strong>：-2 ATP</li>
                </ol>

                <h4>意义</h4>
                <p>糖原合成具有重要的生理意义：</p>
                <ol>
                    <li><strong>能量储备</strong>：糖原作为葡萄糖的储存形式，可以在需要时快速动员提供能量，特别是在肌肉活动和禁食状态下。</li>
                    <li><strong>血糖调节</strong>：肝脏中的糖原可以在血糖水平下降时分解为葡萄糖，释放到血液中，维持血糖水平的稳定。</li>
                    <li><strong>节约蛋白质和脂肪</strong>：充足的糖原储备可以减少对蛋白质和脂肪的依赖，从而保护蛋白质不被过度消耗，同时避免过多的脂肪分解产生酮体。</li>
                </ol>
                <p>糖原合成和分解的精细调控于维持机体能量平衡和代谢健康至关重要。</p>
            `,
            "GNG": `
                <h1>GNG</h1>
                <h3>糖异生（Gluconeogenesis, GNG）</h3>

                <h4>定义</h4>
                <p>糖异生（GNG）是生物体内由非碳水化合物底物（如乳酸、甘油和氨基酸）生成葡萄糖的过程。该过程主要在肝脏和肾脏中进行，对于维持血糖水平的稳定至关重要。</p>

                <h4>反应位置</h4>
                <p>糖异生主要发生在肝脏和肾脏的细胞质和线粒中。</p>

                <h4>关键酶</h4>
                <p>糖异生途径中，有几个关键的酶是糖酵解途径中没的，或者说是为了绕过糖酵解中的不可逆步骤而存在的。以下是糖异生的关键酶：</p>
                <ol>
                    <li><strong>丙酮酸羧化酶（Pyruvate Carboxylase, PC）</strong>：PC的活性受到ADP的抑制，而乙酰辅酶A则显著激活PC，增强糖异生途径起始阶段的活性。</li>
                    <li><strong>磷酸烯醇式丙酮酸羧激酶（PEPCK）</strong>：PEPCK在糖异生中也是限速酶，其活性受ADP抑制，而高浓度的葡萄糖-6-磷酸则有助于增强其活性，推进糖异生过程。</li>
                    <li><strong>果糖-1,6-二磷酸酶（Fructose-1,6-bisphosphatase, FBPase-1）</strong>：FBPase-1受到果糖-2,6-二磷酸和AMP的抑制，而柠檬酸则会激活其活性，是糖异生中一个重要的调控点。</li>
                </ol>

                <h4>总能量（ATP）计算过程</h4>
                <p>从丙酮酸到葡萄糖的糖异生过程中ATP的消耗：</p>
                <ol>
                    <li><strong>消耗</strong>：1 NADH（2.5 ATP）+ 2 ATP + 1 GTP（1 ATP）</li>
                    <li><strong>生成</strong>：无</li>
                    <li><strong>总计</strong>：-5.5 ATP</li>
                </ol>

                <h4>意义</h4>
                <p>糖异生是维持血糖稳态的关键代谢途径，尤其在空腹、饥饿、长时间运动以及机体对碳水化合物需求增加的情况下。以下糖异生的主要生理意义：</p>
                <ol>
                    <li><strong>维持血糖水平稳定</strong>：在饥饿状态下维持血糖浓度在3.89-5.11mmol/L范围内，即使禁食数周也可保持在3.40mmol/L左右。这对于依赖葡萄糖供能的组织(如脑、肌肉、血细胞等)的功能至关重要。</li>
                    <li><strong>Cori循环</strong>：在剧烈运动时，肌肉通过无氧糖酵解产生大量乳酸，乳酸经血液运输到肝脏进行糖异生，既可防止乳酸酸中毒，又能回收能量并更新肌糖原。</li>
                    <li><strong>协助氨基酸代谢</strong>：在禁食晚期、糖尿病或皮质醇过多时，组织蛋白质分解增加，血浆氨基酸水平升高，此时糖异生可作为氨基酸代谢的重要途径。</li>
                    <li><strong>促进肾脏排氢保钠</strong>：在长期禁食导致的代谢性酸中毒中，肾脏糖异生增强可促进肾小管泌氨，有助于维持酸碱平衡。</li>
                </ol>
                <p>糖异生通过消耗能量和利用非糖底物，确保机体在不同生理和病理状态下能够持续获得葡萄糖。</p>
            `,
            "Other": `
                <h1>Other</h1>
                <h2>葡萄糖的完全氧化</h2>
                <p>在葡萄糖的完全氧化过程中，ATP的产量在不同生物或不同条件下有所不同。具体来说，32 ATP 和 30 ATP 的差异主要与 NADH 的跨膜转运和氧化磷酸化的效率有关。</p>

                <h3>32 ATP 的情况</h3>
                <p>通常情况下，真核生物在葡萄糖的完全氧化过程中生成 32 ATP。这个ATP总数是基于以下的情况：</p>
                <ol>
                    <li><strong>糖酵解</strong>：生成2 ATP（直接产生），并且生成2 NADH。每个NADH可以在电子传递链中生成约2.5个ATP。</li>
                    <li><strong>丙酮酸转化为乙酰辅酶A</strong>：每分子丙酮酸生成1 NADH，生成2个丙酮酸，所以产生2 NADH。</li>
                    <li><strong>TCA循环</strong>：每轮TCA循环生成3 NADH、1 FADH₂和1 GTP（等效于ATP）。</li>
                </ol>
                <p>综合上述：7 ATP（糖酵解） + 5 ATP（丙酮酸转化） + 20 ATP（TCA循环） = 32 ATP。</p>

                <h3>30 ATP 的情况</h3>
                <p>在一些情况下，特别是在细胞质中产生的NADH通过甘油-3-磷酸穿梭系统进入线粒体时，每个NADH只能产生1.5个ATP而不是2.5个ATP。这导致：</p>
                <ol>
                    <li><strong>糖酵解</strong>：2NADH只能产生3个ATP（而不是5个ATP）</li>
                    <li><strong>丙酮酸转化和TCA循环</strong>：保持不变，因为这些NADH直接在线粒体中产生</li>
                </ol>
                <p>因此总ATP产量为：5 ATP（糖酵解） + 5 ATP（丙酮酸转化） + 20 ATP（TCA循环） = 30 ATP。</p>
                    <h2>丙酮酸代谢途径</h2>
                    <p>丙酮酸的代谢途径取决于<strong>有氧</strong>或<strong>无氧</strong>条件：</p>

                    <h3>1. <strong>有氧条件下的丙酮酸代谢</strong></h3>
                    <p>在有氧条件下，丙酮酸通过丙酮酸脱氢酶复合体（PDC）转化为乙酰辅酶A，生成CO₂和NADH。乙酰辅酶A进入柠檬酸循环（Krebs循环），与草酰乙酸反应生成2CO₂、3NADH、1FADH₂和1GTP。电子传递链中，NADH和FADH₂被氧化，NADH每分子生成2.5 ATP，FADH₂每分子生成1.5 ATP。总ATP计算为：4 NADH × 2.5 ATP + 1 FADH₂ × 1.5 ATP + 1 GTP = <strong>12.5 ATP</strong>。</p>

                    <h3>2. <strong>无氧条件下的丙酮酸代谢</strong></h3>
                    <p>在无氧条件下，丙酮酸通过乳酸发酵转化为乳酸，再生NAD+以维持糖酵解。在某些微生物中，丙酮酸可通过酒精发酵转化为乙醛，再进一步转化为乙醇和CO₂，同时再生NAD+。无氧条件下不生成额外ATP，仅通过发酵再生NAD+以维持糖酵解，糖酵解每分子葡萄糖净生成2分子ATP。</p>

                    <h3>3. <strong>其他代谢途径</strong></h3>
                    <p>丙酮酸还可以通过糖异生途径转化为葡萄糖，或作为前体参与氨基酸（如丙氨酸）和脂肪酸的合成。</p>

                    <h3>ATP总结（每分子丙酮酸）</h3>
                    <p>在有氧代谢中，总ATP为12.5 ATP（NADH = 2.5 ATP，FADH₂ = 1.5 ATP）。在无氧代谢中，不生成额外ATP，仅再生NAD+以维持糖酵解，每分子葡萄糖净生成2 ATP。</p>

                <h2>糖的代谢及其相关酶促水解</h2>

                <h3>1. 淀粉的酶促水解</h3>
                <p>淀粉是植物储存的多糖，主要由直链淀粉（Amylose）和支链淀粉（Amylopectin）组成。淀粉的水解过程通过多种酶的协同作用，将其分解为可利用的小分子。</p>
                <ul>
                    <li><strong>α-淀粉酶（Alpha-amylase）</strong>：淀粉(α-1,4糖苷键) -> 糊精-> 麦芽糖 </li>
                    <li><strong>葡萄糖苷酶（Glucosidase）</strong>：进一步将麦芽糖分解为葡萄糖。</li>
                    <li><strong>脱支酶（Debranching Enzyme）</strong>：在支链淀粉的水解中，脱支酶通过切断α-1,6糖苷键，协助完成淀粉的彻底分解。</li>
                </ul>
                <p>这些酶的协同作用确保了淀粉的高效水解，使得植物能够有效地利用储存的能量。</p>

                <h3>2. 纤维素和其他双糖的酶促水解</h3>
                <p>纤维素是植物细胞壁的主要成分，由β-1,4糖苷键连接的葡萄糖分子构成。双糖的水解则主要发生在小肠上皮细胞的刷状缘和细胞质中。</p>
                <ul>
                    <li><strong>纤维素酶（Cellulase）</strong>：纤维素酶能够水解纤维素的β-1,4糖苷键，将纤维素分解为葡萄糖或低聚糖。</li>
                    <li><strong>其他双糖酶</strong>：麦芽糖酶（Maltase）, 蔗糖酶（Sucrase）, 乳糖酶（Lactase）, 海藻糖酶（Trehalase）</li>
                </ul>

                <h3>3. 血糖的来源与去路</h3>
                <p>血糖（血液中的葡萄糖）水平的维持对机体至关重要。血糖的来源和去路涉及多个代谢途径和器官。</p>

                <h4>血糖的主要来源：</h4>
                <ul>
                    <li><strong>食物消化吸收</strong></li>
                    <li><strong>肝糖原分解</strong></li>
                    <li><strong>其他物质</strong>：甘油、乳酸等</li>
                </ul>

                <h4>血糖的主要去路：</h4>
                <ul>
                    <li><strong>氧化分解</strong>：CO₂和H₂O，释放能量</li>
                    <li><strong>合成糖原储存</strong></li>
                    <li><strong>转变为三酰甘油、氨基酸等</strong></li>
                </ul>
            `,
            "GC": `
                <h1>GC</h1>
                <h3>乙醛酸循环（Glyoxylate Cycle，GC）</h3>

                <h4>定义</h4>
                <p>乙醛酸循环是一种变异的三羧酸循环，允许生物体将乙酰辅酶A转化为碳水化合物。这个循环在植物种子发芽和微生物生长于乙酸等简单碳源时特别重要。</p>

                <h4>反应位置</h4>
                <p>在真核生物中，乙醛酸循环主要发生在过氧体（植物）或乙醛体（真菌）中。</p>

                <h4>关键酶</h4>
                <p>乙醛酸循环中的关键酶包括：</p>
                <ol>
                    <li><strong>异柠檬酸裂解酶（Isocitrate lyase，ICL）</strong>：作为乙醛酸循环的主要限速酶，催化异柠檬酸裂解为琥珀酸和乙醛酸。这是乙醛酸循环的独特反应和重要调控位点。</li>
                    <li><strong>苹果酸合成酶（Malate synthase）</strong>：催化乙醛酸和乙酰辅酶A合成苹果酸。</li>
                </ol>

                <h4>总能量（ATP）计算过程</h4>
                <p>乙醛酸循环中ATP的生成和消耗：</p>
                <ol>
                    <li><strong>消耗</strong>：无直接消耗</li>
                    <li><strong>生成</strong>：2 NADH（5 ATP）+ 1 FADH₂（1.5 ATP）</li>
                    <li><strong>总计</strong>：6.5 ATP</li>
                </ol>

                <h4>意义</h4>
                <p>乙醛酸循环具有重要的生理意义：</p>
                <ol>
                    <li><strong>脂肪转糖</strong>：使生物体能够利用脂肪或乙酸等二碳化合物合成葡萄糖。</li>
                    <li><strong>能量效率</strong>：相比TCA循环，乙醛酸循环避免了两个脱羧步骤，保留更多碳骨架用于生物合成。</li>
                    <li><strong>植物发芽</strong>：在油料植物种子发芽时，帮助将储存的脂肪转化为糖类。</li>
                    <li><strong>微生物适应</strong>：使微生物能够在乙酸等简单碳源上生长。</li>
                </ol>
            `
        };

        function handlePathwayClick(clickedGroup) {
            // 清除其他节点的激活状态
            node.classed("active", false);
            
            // 设置当前点击节点的激活状态
            node.filter(d => d.id === clickedGroup).classed("active", true);

            // 找出当前通路的最远端节点
            const terminalNodes = data.nodes.filter(n => {
                if (n.group !== clickedGroup) return false;
                // 计算与该节点相连的同组节点数量
                const connections = data.links.filter(l => 
                    (l.source.id === n.id || l.target.id === n.id) &&
                    (l.source.group === clickedGroup && l.target.group === clickedGroup)
                ).length;
                // 如果只有一个连接，说明是端点
                return connections <= 1;
            }).map(n => n.id);

            // 找出与最远端节点直接相连的其他通路节点
            const connectedNodes = new Set();
            terminalNodes.forEach(nodeId => {
                data.links.forEach(l => {
                    if (l.source.id === nodeId && l.source.group !== l.target.group) {
                        connectedNodes.add(l.target.id);
                    }
                    if (l.target.id === nodeId && l.source.group !== l.target.group) {
                        connectedNodes.add(l.source.id);
                    }
                });
            });

            // 更新节点的透明度
            node.style("opacity", d => {
                // 如果是主节点（通路名称节点）
                if (["EMP", "TCA", "PPP", "GS", "GNG"].includes(d.id)) {
                    return d.id === clickedGroup ? 1 : 0.1; // 被点击的主节点完全不透明，其他主节点半透明
                }
                // 如果是次级节点，保持原有逻辑
                if (d.group === clickedGroup) return 1;
                if (connectedNodes.has(d.id)) return 1;
                return 0.1;
            });

            // 更新连接线的透明度
            link.style("opacity", d => {
                // 如果连接的任一端是最远端节点或其直接相连节点
                if (terminalNodes.includes(d.source.id) || terminalNodes.includes(d.target.id) ||
                    connectedNodes.has(d.source.id) || connectedNodes.has(d.target.id)) {
                    return 1;
                }
                return (d.source.group === clickedGroup || d.target.group === clickedGroup) ? 1 : 0.1;
            });

            doubleLink.style("opacity", d => {
                if (terminalNodes.includes(d.source.id) || terminalNodes.includes(d.target.id) ||
                    connectedNodes.has(d.source.id) || connectedNodes.has(d.target.id)) {
                    return 1;
                }
                return (d.source.group === clickedGroup || d.target.group === clickedGroup) ? 1 : 0.1;
            });

            // 更新标签的透明度
            const updateLabelOpacity = (labelSelection) => {
                labelSelection.style("opacity", d => {
                    // 如果是 GC 通路，检查特定的酶标签
                    if (clickedGroup === 'GC') {
                        const enzymeText = labelSelection.filter(l => l === d).text();
                        // 检查是否为 GC 相关的特定酶标签
                        if (enzymeText === '[苹果酸脱氢酶, NAD⁺ -> NADH]' ||
                            enzymeText === '[异柠檬酸裂解酶, 琥珀酸]' ||
                            enzymeText === '[苹果酸合酶]' ||
                            enzymeText === '[磷酸烯醇式丙酮酸羧激酶]') {
                            return 1; // 保持完全不透明
                        }
                        
                        // 检查是否为 GC 相关的特定连接
                        if ((d.source.id === "Isocitrate" && d.target.id === "Glyoxylate") ||
                            (d.source.id === "Glyoxylate" && d.target.id === "Malate") ||
                            (d.source.id === "OAA" && d.target.id === "PEP_GC")) {
                            return 1; // 保持完全不透明
                        }
                    }

                    // 保持原有的透明度逻辑
                    if (d.source.group === clickedGroup && d.target.group === clickedGroup) {
                        return 1;
                    }
                    if (terminalNodes.includes(d.source.id) || terminalNodes.includes(d.target.id) ||
                        connectedNodes.has(d.source.id) || connectedNodes.has(d.target.id)) {
                        return 0.5;
                    }
                    return 0.1;
                });
            };

            // 应用到所有标签
            updateLabelOpacity(linkLabels);
            updateLabelOpacity(empLinkLabels);
            updateLabelOpacity(pppLinkLabels);
            updateLabelOpacity(glycogenesisLinkLabels);
            updateLabelOpacity(gngLinkLabels);
            updateLabelOpacity(gcLinkLabels);

            // 显示信息面板
            const infoPanel = document.getElementById('info-panel');
            const infoPanelContent = document.getElementById('info-panel-content');
            const autoShowInfo = document.getElementById('auto-show-info').checked;
            
            if (pathwayInfo[clickedGroup]) {
                infoPanelContent.innerHTML = pathwayInfo[clickedGroup];
                // 只有在自动显示开关打开时才显示信息面板
                if (autoShowInfo) {
                    infoPanel.classList.add('active');
                }
            }
        }

        // 添加关闭面板的事件监听器
        document.getElementById('close-panel').addEventListener('click', () => {
            document.getElementById('info-panel').classList.remove('active');
            // 不再重置显示状态
        });

        // 修改 GNG 途径的连接标签定义
        const gngLinkLabels = g.append("g")
            .selectAll("text")
            .data(data.links.filter(d => d.source.group === "GNG" || d.target.group === "GNG"))
            .join("text")
            .attr("class", "link-label")
            .attr("text-anchor", "middle")
            .attr("dy", -5)
            .style("fill", "#FFFFFF")
            .text(d => {
                if (d.source.id === "Pyruvate" && d.target.id === "Oxaloacetate") {
                    return "[丙酮酸羧化酶, ATP->ADP]";
                } else if (d.source.id === "Oxaloacetate" && d.target.id === "PEP") {
                    return "[磷酸烯醇式丙酮酸羧激酶, GTP->GDP]";
                } else if (d.source.id === "PEP" && d.target.id === "2PG") {
                    return "[烯醇化酶]";
                } else if (d.source.id === "2PG" && d.target.id === "3PG") {
                    return "[磷酸甘油酸变位酶]";
                } else if (d.source.id === "3PG" && d.target.id === "1,3BPG") {
                    return "[磷酸甘油酸激酶, ATP->ADP]";
                } else if (d.source.id === "1,3BPG" && d.target.id === "GAP") {
                    return "[甘油醛-3-磷酸脱氢酶, NADH + H⁺ -> NAD⁺]";
                } else if (d.source.id === "GAP" && d.target.id === "DHAP") {
                    return "[磷酸三碳异构酶]";
                } else if (d.source.id === "GAP" && d.target.id === "F1,6BP") {
                    return "[醛缩酶]";
                } else if (d.source.id === "F1,6BP" && d.target.id === "F6P") {
                    return "[果糖-1,6-二磷酸酶]";
                } else if (d.source.id === "F6P" && d.target.id === "G6P") {
                    return "[磷酸己糖异构酶]";
                } else if (d.source.id === "G6P" && d.target.id === "Glucose") {
                    return "[葡萄糖-6-磷酸酶]";
                }
                return "";
            });

        // 新增控制按钮的事件监听器
        document.getElementById('control-EMP').addEventListener('click', () => {
            handlePathwayClick('EMP');
        });

        document.getElementById('control-TCA').addEventListener('click', () => {
            handlePathwayClick('TCA');
        });

        document.getElementById('control-PPP').addEventListener('click', () => {
            handlePathwayClick('PPP');
        });

        document.getElementById('control-GS').addEventListener('click', () => {
            handlePathwayClick('GS');
        });

        document.getElementById('control-GNG').addEventListener('click', () => {
            handlePathwayClick('GNG');
        });

        // 新增 Other 按钮的事件监听器
        document.getElementById('control-Other').addEventListener('click', () => {
            handlePathwayClick('Other');
        });

        // 在创建力导向图后添加以下代码
        // 单箭头高亮控制
        document.getElementById('highlight-single-arrow').addEventListener('change', function(e) {
            const singleArrowLinks = link.filter(d => !d.double);
            if (e.target.checked) {
                singleArrowLinks.style('stroke', '#2196F3')
                               .style('stroke-width', '3px')
                               .attr("marker-end", "url(#arrow-highlighted)");
            } else {
                singleArrowLinks.style('stroke', '#4a4a4a')
                               .style('stroke-width', '2px')
                               .attr("marker-end", "url(#arrow)");
            }
        });

        // 聚拢程度控制
        document.getElementById('charge-strength').addEventListener('input', function(e) {
            const strength = -e.target.value;
            simulation.force('charge', d3.forceManyBody().strength(strength))
                     .alpha(0.3)
                     .restart();
        });

        // 连线长度控制
        document.getElementById('link-distance').addEventListener('input', function(e) {
            const distance = +e.target.value;
            simulation.force('link', d3.forceLink(data.links)
                .id(d => d.id)
                .distance(distance))
                .alpha(0.3)
                .restart();
        });

        // 添加左侧控制面板的展开/收起功能
        const leftControlPanel = document.getElementById('left-control-panel');
        const toggleButton = document.getElementById('toggle-control-panel');
        
        toggleButton.addEventListener('click', () => {
            leftControlPanel.classList.toggle('collapsed');
            // 更新按钮文本
            toggleButton.textContent = leftControlPanel.classList.contains('collapsed') ? '▶' : '◀';
        });

        // 添加高能分子高亮控制
        document.getElementById('highlight-energy').addEventListener('change', function(e) {
            const allLabels = [linkLabels, empLinkLabels, pppLinkLabels, glycogenesisLinkLabels, gngLinkLabels, gcLinkLabels];
            const energyKeywords = ['ATP', 'ADP', 'GTP', 'GDP', 'NADH', 'NAD', 'FADH'];
            
            allLabels.forEach(labelGroup => {
                labelGroup.each(function() {
                    const label = d3.select(this);
                    const text = label.text();
                    
                    if (e.target.checked) {
                        // 检查标签是否包含任何高能分子关键词
                        if (energyKeywords.some(keyword => text.includes(keyword))) {
                            label.style('fill', '#FFC107')  // 使用金黄色高亮
                                 .style('font-weight', 'bold')
                                 .style('font-size', '16px');
                        }
                    } else {
                        // 恢复原始样式
                        label.style('fill', '#FFFFFF')
                             .style('font-weight', 'normal')
                             .style('font-size', '14px');
                    }
                });
            });
        });

        // 添加 GC 按钮的事件监听器
        document.getElementById('control-GC').addEventListener('click', () => {
            handlePathwayClick('GC');
        });
    </script>
</body>
</html>
